<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>编辑卡片内容 - 卡片式任务记录系统</title>
  <!-- 引入Element UI样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入Markdown编辑器样式 -->
  <link rel="stylesheet" href="https://unpkg.com/mavon-editor@2.10.4/dist/css/index.css">
  <!-- 引入自定义样式 -->
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/edit-content.css">
</head>
<body>
  <div id="app">
    <el-container class="main-container">
      <!-- 头部区域 -->
      <el-header height="auto">
        <div class="header-content">
          <div class="header-left">
            <el-button icon="el-icon-back" @click="cancelEdit">返回</el-button>
            <h2>编辑卡片内容</h2>
          </div>
          <div class="header-right">
            <el-button @click="saveAsDraft">存稿</el-button>
            <el-button type="primary" @click="saveContent">保存</el-button>
          </div>
        </div>
      </el-header>
      
      <!-- 主体区域 -->
      <el-main>
        <div class="editor-container">
          <!-- 卡片标题 -->
          <div class="title-container">
            <el-input 
              v-model="cardTitle" 
              placeholder="请输入卡片标题" 
              class="title-input"
              clearable
            ></el-input>
          </div>
          
          <!-- Markdown编辑器 -->
          <div class="markdown-editor">
            <mavon-editor 
              v-model="cardContent"
              :toolbars="markdownToolbars"
              :boxShadow="false"
              placeholder="请输入卡片内容，支持Markdown格式..."
              :style="{height: '100%'}"
              @save="saveContent"
            ></mavon-editor>
          </div>
          
          <!-- 工具栏 -->
          <div class="toolbar">
            <el-button-group>
              <el-tooltip content="插入图片" placement="top">
                <el-button icon="el-icon-picture" @click="showUploadDialog"></el-button>
              </el-tooltip>
              <el-tooltip content="附件" placement="top">
                <el-button icon="el-icon-paperclip" @click="showAttachmentDialog"></el-button>
              </el-tooltip>
              <el-tooltip content="表格" placement="top">
                <el-button icon="el-icon-s-grid"></el-button>
              </el-tooltip>
              <el-tooltip content="链接" placement="top">
                <el-button icon="el-icon-link"></el-button>
              </el-tooltip>
            </el-button-group>
            
            <div class="right-tools">
              <el-tooltip content="全屏编辑" placement="top">
                <el-button icon="el-icon-full-screen" circle></el-button>
              </el-tooltip>
              <el-tooltip content="预览" placement="top">
                <el-button icon="el-icon-view" circle @click="previewContent"></el-button>
              </el-tooltip>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
    
    <!-- 图片上传对话框 -->
    <el-dialog
      title="上传图片"
      :visible.sync="uploadDialogVisible"
      width="400px">
      <el-upload
        class="upload-container"
        action="#"
        :http-request="handleImageUpload"
        :show-file-list="false"
        :before-upload="beforeImageUpload">
        <i class="el-icon-plus avatar-uploader-icon"></i>
        <div class="el-upload__text">拖拽图片到此处，或<em>点击上传</em></div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="uploadDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmImageUpload">确 定</el-button>
      </span>
    </el-dialog>
    
    <!-- 附件上传对话框 -->
    <el-dialog
      title="上传附件"
      :visible.sync="attachmentDialogVisible"
      width="400px">
      <el-upload
        class="upload-container"
        action="#"
        :http-request="handleAttachmentUpload"
        :file-list="attachmentList"
        :before-upload="beforeAttachmentUpload">
        <i class="el-icon-plus"></i>
        <div class="el-upload__text">拖拽文件到此处，或<em>点击上传</em></div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="attachmentDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmAttachmentUpload">确 定</el-button>
      </span>
    </el-dialog>
    
    <!-- 预览对话框 -->
    <el-dialog
      title="内容预览"
      :visible.sync="previewDialogVisible"
      width="70%">
      <div class="preview-container">
        <h2 v-if="cardTitle">{{ cardTitle }}</h2>
        <div v-html="renderedContent"></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="previewDialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
  
  <!-- 引入Vue.js -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- 引入Element UI组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 引入Markdown编辑器 -->
  <script src="https://unpkg.com/mavon-editor@2.10.4/dist/mavon-editor.js"></script>
  <!-- 引入Marked用于转换Markdown为HTML -->
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <!-- 引入编辑内容页JS -->
  <script src="./js/edit-content.js"></script>
</body>
</html> 